<template>
	<div class="pageMobile">
		<div v-show="clickTagPageName==='xinxi'">
			<page-relation v-show="isshowbottomBox" :isRequire="clickTagPageName==='xinxi'"></page-relation>
		</div>
		<div v-show="clickTagPageName==='wode'" class="wodeClass">
			<div class="userInfoBox ">
				<div class="item">
					<div v-viewer="{url: 'data-src' }" class="marginT5" v-show="storeUserinfo.url">
						<img :src="storeUserinfo.url+'?w=200&h=200&q=75'" :data-src="storeUserinfo.url"
							class="userInfoUrlBox borderr50 marginR5" />
					</div>
					<!-- <el-image class="userInfoUrlBox borderr50 marginR5" :src="storeUserinfo.url+'?w=200&h=200&q=75'"
						fit="fill" :preview-src-list="[storeUserinfo.url]">
						<div slot="error" class="image-slot">
							<el-image class="userInfoUrlBox borderr50 marginR5"
								:src="$handledImageError(storeUserinfo.url+'?w=100&h=100&q=75','tx')" fit="fill"
								:preview-src-list="[$handledImageError(storeUserinfo.url,'tx')]"></el-image>
						</div>
					</el-image> -->
				</div>
				<div class="marginT15">
					<div class="shs-flex " style="justify-content: flex-start;">
						<div class="item overflow" :title="`${storeUserinfo.username}`">
							{{storeUserinfo.username}}
						</div>
						<div class="item" style="font-size: 12px;color: #ccc;">ID:{{storeUserinfo.Id}}</div>
					</div>
					<div class="item signature " v-if="storeUserinfo.signature">
						<container-page textAlign='textLeft' :isshowIcon='false'
							:text="storeUserinfo.signature"></container-page>
					</div>

					<div class="textLeft ">
						<template v-for="(item,index) in itemHobbylists">
							<el-tag style="font-size: 10px;" class="marginL5 marginT5" :key="item.key"
								v-show="tagLength<40 || index<4"
								:type="tagType[parseInt(Math.random(1) * 5)]">{{item.lable}}</el-tag>
							<el-tooltip :content="storeUserinfo.hobbylist" placement="bottom" :disabled='false'>
								<span v-if="index==4  && tagLength>=40" class="marginL5">...</span>
							</el-tooltip>
						</template>

					</div>
				</div>
			</div>
			<div class="setBox">
				<div class="setItemBox">
					<template
						v-if="storeUserinfo.username==='admin'||storeUserinfo.username==='shsnum' || storeUserinfo.isAdmin===1">
						<div class="setItem" @click="handledOpen('audit')">
							<div class="setText">用户动态管理</div>
							<div class="el-icon-arrow-right"></div>
						</div>
						<div class="setItem" @click="handledOpen('banned')">
							<div class="setText">用户管理</div>
							<div class="el-icon-arrow-right"></div>
						</div>
						<div class="setItem" @click="handledOpen('shsimDict')">
							<div class="setText">字典管理</div>
							<div class="el-icon-arrow-right"></div>
						</div>
						<div class="setItem" @click="handledStartConfigPage" v-if="!handledFindTag('peizhi').isShow">
							<div class="setText">配置页</div>
							<div class="el-icon-arrow-right"></div>
						</div>
					</template>
					<div class="setItem" @click="handledShowUpdatePage">
						<div class="setText">修改个人信息</div>
						<div class="el-icon-arrow-right"></div>
					</div>
				</div>
				<div class="setItemBox">
					<div class="setItem" @click="handledNewRes">
						<div class="setText shs-flex">新朋友&nbsp;&nbsp;<div class="tipItem"
								v-show="contactUntreatedCount"> {{contactUntreatedCount}}</div>
						</div>
						<div class="el-icon-arrow-right"></div>
					</div>
					<div class="setItem" @click="handledPageShow('treeAIIsshow')">
						<div class="setText">树洞-AI助手</div>
						<div class="el-icon-arrow-right"></div>
					</div>
					<div class="setItem" @click="FaceToFaceIsshow=true">
						<div class="setText">随缘建群</div>
						<div class="el-icon-arrow-right"></div>
					</div>
					<div class="setItem" @click="positionFaceToFaceIsshow=true">
						<div class="setText">面对面建群</div>
						<div class="el-icon-arrow-right"></div>
					</div>
				</div>
				<user-info-page ref="MobileUpdateRef"></user-info-page>
				<template v-if="FaceToFaceIsshow">
					<face-to-face ref="positionFaceToFace" :isshow="FaceToFaceIsshow"
						@shs-close="FaceToFaceIsshow=false"></face-to-face>
				</template>
				<template v-if="positionFaceToFaceIsshow">
					<page-face-to-face ref="positionFaceToFace" :isshow="positionFaceToFaceIsshow"
						@shs-close="positionFaceToFaceIsshow=false"></page-face-to-face>
				</template>

				<!-- <div class="setItem" @click="handledInDocument">
					<div class="setText">个人证件 (TEST)</div>
					<div class="el-icon-arrow-right"></div>
				</div> -->
				<div class="setItemBox">
					<div class="setItem" @click="handledOpen('self')">
						<div class="setText">关于我们</div>
						<div class="el-icon-arrow-right"></div>
					</div>
					<div class="setItem" @click="handledLogOut">
						<div class="setText">退出</div>
						<div class="el-icon-arrow-right"></div>
					</div>
				</div>
				<!-- <div class="setItem" @click="handledtest">
					<div class="setText">test</div>
					<div class="el-icon-arrow-right"></div>
				</div> -->
				<!-- <div class="item textCenter font20 color-error">
					<span> 完整版请前往PC端体验</span>
				</div> -->
			</div>

		</div>
		<div v-show="clickTagPageName==='peizhi'">
			<page-config></page-config>
		</div>

		<div v-show="clickTagPageName==='find'">
			<recommend-page v-show="clickTagPageName==='find'"></recommend-page>
		</div>
		<div v-show="clickTagPageName==='state'">
			<state-page></state-page>
		</div>
		<div class="bottomBox levelTop" v-show="isshowbottomBox">
			<pageTag v-model="clickTagPageName" v-for="value,index in tagList" :key='value.id' :tag='value'
				@click.native="handledTag(value.signName)" v-show="value.isShow"></pageTag>
		</div>
		<chat-container ref="ChatContainerMobileRef" ></chat-container>
	</div>
</template>

<script>
	import {
		getContactUntreated
	} from '@/api/relationshipUser'
	import {
		updateUser,
		logout,
	} from '@/api/user'
	import {
		setToken
	} from '@/utils/auth'
	import {
		MessageBox
	} from 'element-ui'
	import {
		confirmCconfig
	} from "@/utils/config"

	import {
		debounce,
		uniqueE
	} from "@/utils/common"
	import {
		handledSHSArray
	} from "@/utils/base"
	import Storage from "@/utils/session.js"
	import pageTag from "@/views/mobile/components/pageTag";
	import pageRelation from "@/views/mobile/components/pageRelation"
	import pageConfig from "@/views/mobile/components/pageConfig"
	import pageFaceToFace from "@/views/mobile/components/facetoface/pageFaceToFace"
	import FaceToFace from "@/views/mobile/components/facetoface/FaceToFace"
	import statePage from "@/views/mobile/components/statePage/index"
	import RecommendPage from "@/views/mobile/components/RecommendPage/index"
	import singleUpload from "@/components/Upload/singleUpload"
	import userInfoPage from "@/components/userinfo/index"
	import containerPage from "@/components/container/index"
	import ChatContainer from "@/components/ChatContainer/index"

	export default {
		name: "pageMobile",
		props: {

		},
		components: {
			pageTag,
			pageRelation,
			pageConfig,
			singleUpload,
			pageFaceToFace,
			FaceToFace,
			userInfoPage,
			statePage,
			RecommendPage,
			containerPage,
			ChatContainer
		},
		data() {
			return {
				tagType: ["", "success", "info", "warning", "danger"],
				tagLength: 0, //爱好标签的字符长度
				dialogVisibleImage: false,
				// isShowRelationshipPage: false,//是否显示联系人列表
				clickTagPageName: "",
				tagList: [{
						id: 1,
						signName: "state",
						tagName: '动态',
						defaultIcon: "icon-find10",
						clickIcon: "icon-find20",
						isShow: true,
					},
					{
						signName: "xinxi",
						tagName: '信息',
						defaultIcon: "icon-xinxi10",
						clickIcon: "icon-xinxi20",
						isShow: true
					}, {
						signName: "find",
						tagName: '推荐',
						defaultIcon: "icon-find10",
						clickIcon: "icon-find20",
						isShow: true
					}, {
						signName: "peizhi",
						tagName: '配置',
						defaultIcon: "icon-shezhi10",
						clickIcon: "icon-shezhi20",
						isShow: false
					},
					{
						signName: "wode",
						tagName: '我的',
						defaultIcon: "icon-wode10",
						clickIcon: "icon-wode20",
						isShow: true
					},
				],
				positionFaceToFaceIsshow: false,
				FaceToFaceIsshow: false,
				contactUntreatedCount: 0, //获取未处理的好友请求数量
				itemHobbylists:{}
			}
		},
		mounted() {
			this.$store.commit("SetisshowbottomBox", true)
			//处理元素id问题
			this.tagList.forEach((item, index) => {
				item.id = index + 1
			})
			if (this.$route.params.code) {
				this.clickTagPageName = this.$route.params.code
			} else if (this.$store.getters.MobilePageCode) {
				this.clickTagPageName = this.$store.getters.MobilePageCode
			}


		},
		computed: {

			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
			//是否显示底部导航栏
			isshowbottomBox() {
				return this.$store.getters.isshowbottomBox
			}
		},
		methods: {
			uniqueE,
			/**打开新弹窗*/
			handledPageShow(code){
				if(code=='treeAIIsshow'){
					this.$refs['ChatContainerMobileRef'].handledInit(true)
				}
			},
			//获取未处理的好友请求
			contactUntreated() {
				getContactUntreated().then(res => {
					if (res.code == 200) {
						this.contactUntreatedCount = res.data.count || 0
					}
				})
			},
			handledNewRes() {
				this.$router.push("mobileContacts")
			},
			handledShowUpdatePage() {
				this.$refs["MobileUpdateRef"].initData(true)
			},
			initInfomation() {
				try {
					let userInfo = this.storeUserinfo.Id ? this.storeUserinfo : JSON.parse(Storage.getSession())
				} catch (e) {}
			},
			handledTag(name) {
				this.clickTagPageName = name;
				this.$store.commit("setMobilePageCode", name); //激活某页  后续切换页返回 切换到本页
			},
			/**跳转
			 */
			handledOpen(url) {
				this.$router.push(url)
			},
			/**配置管理*/
			handledStartConfigPage() {
				this.handledFindTag("peizhi").isShow = true
				this.handledTag("peizhi");
			},
			handledFindTag(v) {
				let index = -1;
				try {
					this.tagList.forEach((item, i) => {
						if (item.signName == v) {
							index = i
							throw new Error('tcxh'); //退出循环
						}
					})
				} catch (e) {
					if (e.message != "tcxh") {
						console.log(e.message);
					}
				}
				return this.tagList[index]
			},
			//退出登录
			handledLogOut: debounce(function() {
				let _this = this
				MessageBox.confirm('确认退出？', '用户信息', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					center: true,
					customClass: "ShsMessageBox"
				}).then((data) => {
					confirmCconfig.isTure = true;
					logout().then((data) => {
						confirmCconfig.isTure = true;
						this.$store.commit("setLogOut")
						this.$store.commit("socketLogOut");
						this.$router.push('login')
					}).catch(error => {
						console.log("退出异常", error);
					})
				}).catch(err => {
					confirmCconfig.isTure = true;
				})
			}),
			//个人证件
			handledInDocument() {
				this.$router.push("document")
			},
			handledSHSArray
		},
		watch: {
			"clickTagPageName": {
				deep: true,
				immediate: true,
				handler: function(value) {
					if (value == 'wode') {
						this.contactUntreated()
					}
				}
			},
			"storeUserinfo": {
				deep: true,
				immediate: true,
				handler: function(value) {
					if (this.$store.getters.isExecute) return
					try{
						if(value.Id!=undefined && value.Id!=null&& value.Id!=""){
							this.contactUntreated()
						}
					}catch(e){
						// console.log("storeUserinfo",e);
					}
					
					let item = this.handledSHSArray(value, "hobbylist")
					let list = []
					let tagLength = 0;
					for (let i = 0; i < item.length; i++) {
						list[i] = {
							lable: item[i],
							key: this.uniqueE(8, 16)
						}
						tagLength += item[i].length;
					}
					this.tagLength = tagLength; //爱好标签的字符长度
					this.itemHobbylists = list 
				}
			},
		}

	}
</script>

<style scoped>
	.pageMobile {
		box-sizing: border-box;
	}

	.wodeClass {
		position: relative;
		width: 100%;
		padding-top: 10px;
		box-sizing: border-box;
		/* margin-bottom: 60px; */
		height: calc(100vh - 62px);
		overflow: hidden;
		overflow-y: auto;
		background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	}

	.tipItem::before {
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		line-height: 10px;
		border-radius: 50%;
		background-color: #f00;
	}

	.userInfoBox {
		width: 96vw;
		min-height: 150px;
		position: relative;
		/* top: calc(50% - 150px); */
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		/* align-items: center; */
		border-radius: 22px;
		background-color: #aaffff;
	}

	.userInfoBox .item {
		display: inline-block;
		margin: 0 5px;
	}

	.userInfoBox .signature {
		width: 98%;
	}

	.userInfoUrlBox {
		width: 100px;
		height: 100px;
		top: 10px;
	}

	.setBox {
		width: 100%;
		width: 96vw;
		margin-top: 1.25rem;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: space-between;
		align-items: center;
	}

	.setBox .setItemBox {
		width: 100%;
		border-radius: 15px;
		overflow: hidden;
		margin-top: 0.25rem;
		background-color: #aaffff;
	}

	.setBox .setItem {
		width: 100%;
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		color: #636363;
		border-bottom: 1px solid #dedede;
	}


	.pageMsg {
		width: 98vw;
		height: calc(100vh);
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		top: 0px;
		position: fixed;
		bottom: 50px;
	}

	.bottomBox {
		width: 98vw;
		height: 50px;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.levelTop {
		background-color: #ffffff;
	}
</style>